<template>

	<view class="conter">
		<view style="color: white; margin: 30rpx 30rpx" v-show="recordCount > 0">探险次数：{{ recordCount }}</view>
		<u-list @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in recorderList" :key="index">
				<view class="contaione">
					<view class="contaionetow">
						<view class="contaione1">开始探险时间：{{ item.startTime }}</view>
						<view class="contaione1">结束时间：{{ item.endTime }}</view>
						<view class="contaione1">获取的时之沙数量：{{ item.getPropNumber }}</view>
						<view class="contaione1">当前状态：{{ item.isGet == 1 ? '探险中' : item.isGet == 2 ? '待领取' : '已领取' }}</view>
					</view>
				</view>
			</u-list-item>
		</u-list>
		<!-- 0.0 -->
		<view class="Abouts" v-if="recorderList.length == 0">
			<nodatapage></nodatapage>
		</view>
	</view>
</template>
<script>
import nodatapage from '../../components/nodatapage/nodatapage.vue';
import { getCrazyRecord, getCrazyRecordCount } from '@/api/breed/crazy.js';
export default {
	components: {
		nodatapage
	},
	data() {
		return {
			recorderList: [],
			memberId: 0,
			page: 1,
			size: 10,
			totalSize: 0,
			recordCount: 0 //探险次数
		};
	},
	created() {
		this.crazyRecord();
		this.crazyRecordCount();
	},
	methods: {
		// 探险记录
		async crazyRecord() {
			let param = {};
			param.page = this.page;
			param.size = this.size;
			const data = await getCrazyRecord(param);
			let _this = this;
			data.data.pageData.map((i) => {
				_this.recorderList.push(i);
			});
			this.totalSize = data.data.totalSize;
		},
		//探险次数
		async crazyRecordCount() {
			const data = await getCrazyRecordCount();
			this.recordCount = data.data;
		},
		// list加载事件
		scrolltolower() {
			//加载时候判断是否还有下一页
			if (this.recorderList.length < this.totalSize) {
				this.page++;
				//则还有下一页
				this.crazyRecord();
			}
		}
	}
};
</script>
<style lang="scss" scoped>
page {
	background-color: #0d0e12; //全局颜色
}
.conter {
	.contaione {
		width: 92%;
		height: 400rpx;
		background-color: #13161b;
		margin: 30rpx 30rpx;
		border-radius: 20rpx;
		position: relative;
	}

	.contaionetow {
		position: absolute;
		margin: 45rpx 38.44rpx;

		.contaione1 {
			margin: 0 0 55rpx 0;
			color: #fff;
		}
	}

	.contaione2 {
		width: 45%;
		height: 300rpx;
		position: absolute;
		border-radius: 10rpx;
		top: 150rpx;
		right: 34.88rpx;

		img {
			width: 100%;
			border-radius: 10rpx;
		}
	}

	.download {
		width: 45%;
		position: absolute;
		top: 53rpx;
		right: 38.44rpx;

		img {
			width: 100%;
			border-radius: 10rpx;
		}
	}

	.Abouts {
		margin-top: -1200rpx;
		img {
			width: 100%;
		}
	}
}
</style>
